{% extends 'manage/base_manage.html' %}
{% load static %}
{% block title %}添加产品{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{% static 'css/product/product_add.css' %}">
{% endblock %}

{% block content %}
    <div class="content">
        <div id="product_content">
            <h3 id="add_product_name">添加产品</h3>
            <div id="product_name">
                <form id="product_input" method="post" action="">
                    {% csrf_token %}
                    <div class="form-group">
                        <label id='product_name_distance' for="p_name_input">产品名称：</label>
                        <br><br>
                        <input name="product_name" type="text" class="form-control" id="p_name_input"
                               placeholder="输入产品名称" required="required">
                        <p id="msg_product_name" style="color: red"></p>
                    </div>
                    <div class="form-group">
                        <label id='product_name_distance' for="p_des_input">产品描述：</label>
                        <br><br>
                        <input name="product_desc" type="text" class="form-control" id="p_des_input"
                               placeholder="输入产品描述" required="required">
                    </div>
                    <div class="form-group">
                        <label id='product_name_distance' for="p_er_input">产品负责人：</label>
                        <br><br>
                        <input name="product_er" type="text" class="form-control" id="p_er_input" placeholder="输入产品负责人"
                               required="required">
                    </div>
                    <button id="btnSubmit" type="button" class="btn">保存</button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>
        toastr.options = {
            closeButton: true,
            timeOut: "1000",
            positionClass: "toast-center-center",
        };

        $(function () {
            btnSubmit();
        });

        // 点击提交数据
        function btnSubmit() {
            $('#btnSubmit').click(function () {
                $.ajax({
                    url: "{% url 'atp:product_add' %}",
                    type: "POST",
                    dataType: "JSON",
                    data: $('#product_input').serialize(),
                    success: function (res) {
                        if (res.code === 200) {
                            toastr.success("添加成功");
                            setTimeout(function () {
                                location.href = "{% url 'atp:product_manage' %}"
                            }, 1000)
                        } else if (res.code === 201) {
                            toastr.success("添加失败");
                            location.href = "{% url 'atp:product_manage' %}"
                        } else if (res.code === 202) {
                            $('#msg_product_name').text("产品名称不能为空")
                        } else if (res.code === 203) {
                            $('#msg_product_name').text("产品已存在")
                        }
                    }
                })
            })
        }
    </script>
{% endblock %}